 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
<style>
  img{
    width: 210px;height: 210px;
    border-radius: 105px;
    background-position: center;background-size: 210px 210px;
  }
  h3{
    color: #87cab6;
    margin-left: 65px;
    margin-top: 0;
    margin-bottom: 0;
  }
  p{
    color: #a56437;
    font-size: 16px;
  }
  table{
    width: 210px;
    height: 110px;
    border-collapse: collapse;
    border: 1px solid #f1d8b6;
    color: #a56437;
    font-size: 14px;
    margin-top: 30px;

  }
  .a1{
    width: 75px;
    height: 40px;
    display: block;
    color: #64c9e1;
    border: 1px solid #64c9e1;
    margin: 0 auto;
    text-align: center;
    padding-top: 5px;
    box-sizing: border-box;
    text-decoration: none;
    margin-left: 65px;
    margin-top: 14px;
  }
  .a2{
    display: block;
    color: #64c9e1;
    margin-bottom: 30px;
  }
  .ss1{
    width: 51px;
    height: 18px;
    color: #05ae0e;
    border: 1px solid #05ae0e;
    font-size: 12px;
    border-radius: 3px;
  }
  .ss2{
    width: 51px;
    height: 18px;
    color: #FF3B30;
    border: 1px solid #FF3B30;
    font-size: 12px;
    border-radius: 3px;
  }
  .el-card__body, .el-main {
    padding: 10px;
  }
  .el-menu-item_top{
    position:relative;
    left: 170px;
  }
  b:hover{
    color: orange;
  }
  a{
    text-decoration: none;
  }
  a:link{color: black}
  a:visited{color: black}
  a:hover{color: orange}
  a:active{color: orange}
  .el-menu--horizontal>.el-menu-item {
    border-bottom: none;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
  .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: none;
  }
  .el-icon-arrow-down:before {
    content: none;
  }

</style>
</head>
<body>
<div id="app" style="width: 1000px;height: 760px;background-color: #ffffff;margin: 0 auto;">
  <div style="padding: 0">
    <el-menu style="width: 1200px;margin: 0 auto"
             mode="horizontal"
             @select="handleSelect"
             text-color="black"
             active-text-color="black">
      <a href=""><img src="logo.png" style="float: left;position: relative;width: 80px; height: 77px"></a>
      <el-menu-item index="1" class="el-menu-item_top"><b><a href="/index.html">首页</a> </b></el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="2" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>在售品种</b></template>
          <el-menu-item index="2-1"><a href="/searchcat.html">在售猫咪</a></el-menu-item>
          <el-menu-item index="2-2"><a href="/searchdog.html">在售狗狗</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="3" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>宠物词典</b></template>
          <el-menu-item index="3-1"><a href="/catDictionary.html">猫咪的饲养方式</a></el-menu-item>
          <el-menu-item index="3-2"><a href="/dogDictionary.html">狗狗的饲养方式</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item class="el-menu-item_top">
        <el-submenu index="4" style="position:relative;top:3px;right: 5px">
          <template slot="title"><b>服务项目</b></template>
          <el-menu-item index="4-1"><a href="">宠物美容</a></el-menu-item>
          <el-menu-item index="4-2"><a href="">宠物酒店</a></el-menu-item>
          <el-menu-item index="4-3"><a href="/catcafe.html">猫咖啡馆</a></el-menu-item>
          <el-menu-item index="4-4"><a href="/dogpark.html">狗狗公园</a></el-menu-item>
        </el-submenu>
      </el-menu-item>
      <el-menu-item index="5" class="el-menu-item_top"><a href="/lianxi.html"><b>联系我们</b></a></el-menu-item>
      <el-menu-item index="6" style="float: right;position: relative"><i class="el-icon-user" style="font-size: 30px"></i></el-menu-item>
      <div style="float: right;position: relative;top: 10px">
        <el-input type="text">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
    </el-menu>
  </div>
  <div style="height: 130px;margin: 30px 0 15px">
    <h1 style="color: #a56437;font-size: 54px;text-align: center">搜索狗狗</h1>
  </div>
  <el-divider></el-divider>
  <p>星级宠屋店可爱的狗狗们。如果您这里没有您要找的种类，请联系我们的店员，我们为您寻找您心仪的狗狗。</p>
  <p>并且，星级宠屋店内雌性犬生的小狗也接受预约。</p>

  <el-row gutter="20">
    <el-col style="margin: 10px 0" span="6" v-for="p in catArr ">
      <el-card >
  <div style="width: 240px;height: 240px;float: left" >
    <img src="img/1.jpg" alt="">
    </div>

    <span class="ss1">{{p.zt}}</span>
    <h3>{{p.name}}</h3>
  <table >
    <tr>
      <th>查询号码</th>
      <th>{{p.id}}</th>
    </tr>
    <tr>
      <th>性别</th>
      <th>{{p.sex}}</th>
    </tr>
    <tr>
      <th>生日</th>
      <th>{{p.birth}}</th>
    </tr>
    <tr>
      <th>价格</th>
      <th>{{p.money}}</th>
    </tr>
  </table>
    <a  class="a1" :href="'/cwxx.html?id='+p.id" >详情 &raquo;</a>

      </el-card>

    </el-col>

  </el-row>


</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
 let v = new Vue({
    el: '#app',
    data: function() {
      return {
        catArr:[],
       
      }
    },
   methods:{
     handleSelect(key, keyPath) {
       console.log(key, keyPath);
     }
   },
   // created:function () {
   //    axios.get("selectcats").then(function (response) {
   //      v.catArr=response.data;
   //    })
   // }
  })
</script>
</html>